<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/index.css" type="text/css">
        <link rel="stylesheet" href="css/default.css" type="text/css">
    </head>
<body>
    <div id="window">
        <div id="title">
            &nbsp;
            <img src="img/logo.png" height="50px">
            <h1>PerDev - </h1>
            <span style="display: inline-block;height: auto;width: 50px;"></span>
            <div href="#" id="title-components" class="nav-btn">Components</div>
            <div href="#" id="title-console" class="nav-btn">Console</div>
        </div>
        <br>
        <br>
        <br>
        <br>
        <div id="real-window">
            <div id="real-window-component" style="display: block;">
                <h2>Per.js All Components:&nbsp;&nbsp;<button id="component-refresh" style="width: 70px;">Refresh</button></h2>
                <div id="all-components">

                </div>
                &nbsp;
                <div id="all-components-html">
                    <code>

                    </code>
                </div>
                <hr>
                <h2>Per.js Set Components:</h2>
                <input id="set-component-name" type="text" placeholder="Please enter the component name">
                &nbsp;
                <input id="set-component-tem" type="text" placeholder="Please enter the component template">
                &nbsp;
                <button id="set-component-button">Set Component Template</button>
            </div>
            <div id="real-window-console" style="display: none;">
                <textarea placeholder="Please enter the code: (return to execute)" id="code-enter-area"></textarea>
                <div id="code-condition-list"></div>
            </div>
        </div>
    </div>
    <script src="js/highlight.pack.js"></script>
    <script src="js/devtools.js"></script>
</body>
</html>